<template>
  <div class="container">
    <header class="detail-header">
      <router-link to="/" class="back-button">&larr; 返回</router-link>
      <h1 class="page-title">{{ category?.name || '加载中...' }}</h1>
    </header>
    
    <div v-if="loading" class="loading-state">正在加载图片...</div>

    <div class="image-list" v-if="category">
      <img 
        v-for="imageUrl in category.images"
        :key="imageUrl"
        :src="imageUrl"
        :alt="category.name"
      >
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getCategoryById } from '@/services/api';

// --- Props ---
// 接收由路由传递过来的 id 参数
const props = defineProps({
  id: {
    type: String,
    required: true,
  }
});

// --- 响应式状态 ---
const category = ref(null);
const loading = ref(true);

// --- 生命周期钩子 ---
onMounted(async () => {
  try {
    const response = await getCategoryById(props.id);
    category.value = response.data;
  } catch (error) {
    console.error('获取品类详情失败:', error);
    // 可以在这里处理错误，例如跳转到404页面
  } finally {
    loading.value = false;
  }
});
</script>